<template>
  <div class="GSenderDetail">
    <zyInfoPanel title="人员详情" :showUnfoldButton="false" class="baseInfo">
      <div class="baseBox">
        <zy-modal-info :model-info="baseInfo" cell-num="3"></zy-modal-info>
      </div>
      <div class="cooperativeImgContent">
        <div class="imgItem card">
          <div class="itemTitle">身份证</div>
          <div class="itemContent">
            <el-upload
                class="upload-demo"
                drag
                action=""
                :httpRequest="uploadFile"
                :data="{type: 'legal_card_pros'}"
                accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                :show-file-list="false" disabled
            >
              <zy-image readonly v-model="card_img_cons" v-if="card_img_cons"></zy-image>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请上传身份证正面
              </div>
            </el-upload>
            <el-upload
                class="upload-demo"
                drag
                action=""
                :httpRequest="uploadFile"
                :data="{type: 'legal_card_cons'}"
                accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                :show-file-list="false" disabled
            >
              <zy-image v-model="card_img_pros" readonly v-if="card_img_pros"></zy-image>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请上传身份证反面
              </div>
            </el-upload>
          </div>
        </div>
      </div>
    </zyInfoPanel>
    <filterPanel filterName="GSenderDetailFilter" filterTitle="寄件查询" :filterList="filterData"
                 @filterChange="filterChange"></filterPanel>
    <tablePanel tableName="GSenderDetailTable" :tableLoading="loading" tableTitle="寄件列表" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
      <zy-button type="primary" @click="exportExcel">导出列表</zy-button>
    </tablePanel>
  </div>
</template>

<script>
	import {mapGetters} from "vuex";

	export default {
		name: "GSenderDetail",
		props: {},
		data() {
			return {
				baseInfo: [
					{
						title: '姓名',
						name: 'card_name',
						type: 'input',
						value: '',
						readonly: true
					},
					{
						title: '联系方式',
						name: 'member_mobile',
						type: 'input',
						value: '',
						readonly: true
					},
					{
						title: '身份证号',
						name: 'card_no',
						type: 'input',
						value: '',
						readonly: true
					},
				],
				filterData: [
					{
						title: '承运物流企业',
						name: 'company_name',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '企业类型',
						name: 'type',
						type: 'select',
						optionList: [
							{label: '全部', value: ''},
							{label: '物流', value: 0},
							{label: '快递', value: 1},
							{label: '分拣中心', value: 2},
						],
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '送达站点',
						name: 'arrive_region',
						type: 'cascader',
						value: [],
						optionList: [],
						optionProps: {
							checkStrictly: true,
							value: 'value',
							label: 'label',
							children: 'children'
						},
						isShow: true,
						isSelected: true
					},
					{
						title: '揽件员',
						name: 'employee_name',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人',
						name: 'receive_communicate_name',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人联系方式',
						name: 'receive_communicate_mobile',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件时间',
						name: 'registration_date',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
				],
				form: {
					company_name: '',
					type: '',
					arrive_region: [],
					employee_name: '',
					receive_communicate_name: '',
					receive_communicate_mobile: '',
					registration_date: [],
					page_start: 1,
					page_size: 10
				},
				loading: false,
				tableList: [
					{
						title: '寄件编号',
						width: 160,
						name: 'logistics_id',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件单号',
						width: 160,
						name: 'logistics_no',
						isShow: true,
						isSelected: true
					},
					{
						title: '承运物流企业',
						width: 200,
						name: 'company_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '企业类型',
						width: 120,
						name: 'company_type_str',
						isShow: true,
						isSelected: true
					},
					{
						title: '送达站点',
						width: 180,
						name: 'receive_communicate_address',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件人',
						width: 120,
						name: 'post_communicate_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件人联系方式',
						width: 160,
						name: 'post_communicate_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '揽件员',
						width: 120,
						name: 'employee_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人',
						width: 120,
						name: 'receive_communicate_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人联系方式',
						width: 160,
						name: 'receive_communicate_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '是否可疑',
						width: 120,
						name: 'is_dubious_str',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件客户类型',
						width: 120,
						name: 'customer_id',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件时间',
						width: 200,
						name: 'create_time',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						width: 150,
						name: 'handler',
						fixed: 'right',
						btns: [
							{
								type: 'detail',
								name: '详情'
							},
						],
						isSelected: true
					}
				],
				tableData: [],
				total: 0,
				member_id: '',
				card_img_cons: '',
				card_img_pros: '',
				casList: []
			};
		},
		computed: {
			postData() {
				let data = {
					company_name: this.form.company_name,
					type: this.form.type,
					arrive_region: this.form.arrive_region[this.form.arrive_region.length - 1],
					employee_name: this.form.employee_name,
					receive_communicate_name: this.form.receive_communicate_name,
					receive_communicate_mobile: this.form.receive_communicate_mobile,
					registration_date: this.form.registration_date,
					member_id: this.member_id,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.registration_date && this.form.registration_date.length > 0) {
					data.create_time_start = this.form.registration_date[0] / 1000;
					data.create_time_end = this.form.registration_date[1] / 1000;
				}
				return data;
			},
			...mapGetters(['getAreaList']),

		},
		watch: {
			casList: {
				handler(newVal) {
					this.setFilterData({
						arrive_region: newVal
					}, ['arrive_region'])
				},
				deep: true
			}
		},
		components: {},
		methods: {
			setFilterData(val, nameList) {
				for (let item of this.filterData) {
					if (nameList.indexOf(item.name) !== -1) {
						item.optionList = val[item.name]
					}
				}
			},
			getRegionList() {
				if (this.getAreaList.length) {
					this.casList = this.getAreaList;
				} else {
					this.$axios.post(this.$api.arriveRegionList, {}).then(res => {
						let {code, msg, data} = res;
						if (code == 200) {
							this.casList = data;
							this.changeState({areaList: data})
						} else {
							this.$message.error(msg);
						}
					}).catch(ret => {
						this.$message.error(ret.msg || '服务繁忙，请稍后再试');
					});
				}
			},
			getDetail() {
				this.$axios.post(this.$api.admin_memberDetail, {member_id: this.member_id}).then(res => {
					let {code, msg, data} = res;
					if (code === 200) {
						this.baseInfo = this.baseInfo.filter(item => {
							for (let key in data) {
								if (item.name === key) {
									item.value = data[item.name];
								}
							}
							return item
						});
						this.card_img_cons = data.card_img_cons;
						this.card_img_pros = data.card_img_pros;
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				})
			},
			//导出
			exportExcel() {
				this.$import_excal(this.download_url || "");
			},
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getData();
			},
			tableClick(data, type) {
				this.$toRoutePath({
					path: "/logistics_list/logistics_list_detail",
					edit: true,
					query: {logistics_id: data.logistics_id}
				});
			},
			getData() {
				this.tableData = [];
				this.loading = true;
				this.$axios.post(this.$api.admin_logisticsList, {...this.postData}).then(res => {
					let {code, msg, data} = res;
					this.loading = false
					if (code === 200) {
						this.tableData = data.list.filter(item => {
							item.detail = true;
							return item;
						});
						this.download_url = data.download_url || ''
						this.total = data.pagination.total_count || 0;
					} else {
						this.total = 0
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.loading = false
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				})
			},
			uploadFile(params) {
				let type = params.data.type;
				this.$axios.post(this.$api.uploadFile, {
					isFile: true,
					file: params.file,
					operator: 'goods',
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this[type] = res.data.url;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		},
		mounted() {
			this.member_id = this.$route.query.member_id || '';
			this.getData();
			this.getDetail();
			this.getRegionList();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/personnelManage/senderDetail/index.less">

</style>
